<template>
    <div class="common">
        <div class="tabel-head">
            <div>分类名称</div>
            <div>属性标签</div>
            <div>是否筛选</div>
            <div>是否必填</div>
            <div>排序</div>
            <div>状态</div>
        </div>
        <div class="tabel">
            <div>全部分类</div>
            <div class="tabel-content">
                <div class="tabel-name">
                    全部分类-全部分类属性
                </div>
                <el-scrollbar class="scrollbar" max-height="calc(100vh - 352px)">
                    <slot></slot>
                </el-scrollbar>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { onMounted } from "vue";
    const emit=defineEmits(["init",'update:loading']);
    onMounted(()=>{
        emit('update:loading',true);
        emit("init");
    })
</script>

<style lang="scss" scoped>
@mixin gray {
    background: #F2F6FC;
    height: 50px;
    line-height: 50px;
}

$border: 1px solid #E1E6ED;

.tabel-head {
    @include gray;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(6,1fr);
}
.tabel {
    display: grid;
    grid-template-columns: 1fr 5fr;
    margin-top: 10px;
    height: calc(100vh - 300px);
    border: $border;

    >div:first-child {
        line-height: calc(100vh - 300px);
        border-right: $border;
        text-align: center;
    }

    .tabel-content {
        flex: 1;
    }

    .tabel-name {
        @include gray;
        padding-left: 10px;
        border-bottom: $border;
    }

    .el-scrollbar {
        height: unset;
    }
}
</style>